<!DOCTYPE html>
<html lang="zh" xmlns:border="http://www.w3.org/1999/xhtml">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        body {
            background-size: 50%;
            background-repeat: no-repeat;
            background-color: #7fc37e;
        }

        .right {
            position: absolute;
            top: 30%;
            left: 59%;
            width: 350px;

        }

        div {
            text-align: center;
            color: rgba(1, 0, 12, 0.86);

        }

        legend {
            color: #fefee2;
            font-size: 40px;
        }

        /*input {*/
        /*    background: url("/images/账户.png")no-repeat right;*/
        /*    align-items: center;*/
        /*    !*size: B4;*!*/
        /*    height:30px;*/
        /*}*/


    </style>
    <link rel="stylesheet" href="../welcome/welcome.css" type="text/css"/>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <style>

        .try-btn {
            position: relative;
            left: 50%;
            width: 156px;
            height: 54px;
            line-height: 54px;
            margin-top: 40px;
            margin-left: -78px;
            color: #3370ff;
            background: white;
            text-align: center;
            border-radius: 100px;
            font-weight: 600;
        }

        .swiper {
            width: 50%;
            height: 785.6px;
        }

        .bg-sw {
            width: 100%;

        }

        .row-2 {

            display: flex; /*重要*/
            justify-content: center; /*重要*/
            align-items: center;
        }

        .swiper {
            margin-left: 0;
            margin-right: 0;
            position: relative;
            overflow: hidden;
            list-style: none;
            padding: 0;
            z-index: 1;
        }

        .register {
            width: 50%;
        }
    </style>
</head>
<body>
<div class="row-2">
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img class="bg-sw"
                                           src="https://img.zcool.cn/community/01e8705c90acfda801208f8b33683f.jpg@1280w_1l_2o_100sh.jpg">
            </div>
            <div class="swiper-slide"><img class="bg-sw"
                                           src="https://tse2-mm.cn.bing.net/th/id/OIP-C.F7yxCkHHaudwdbTu5VQ7RgHaLH?pid=ImgDet&rs=1">
            </div>
            <div class="swiper-slide"><img class="bg-sw"
                                           src="https://tse4-mm.cn.bing.net/th/id/OIP-C.RLJxSLaWVcnylaU5zlUqygHaLH?pid=ImgDet&rs=1">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <!--    <div class="swiper-pagination"></div>-->

        <!-- 如果需要导航按钮 -->
        <!--        <div class="swiper-button-prev"></div>-->
        <!--        <div class="swiper-button-next"></div>-->

        <!-- 如果需要滚动条 -->
        <!--    <div class="swiper-scrollbar"></div>-->
    </div>

    <div class="register">

        <!--    <hr style="border:3px solid #fefee2" />-->
        <!--    <fieldset style="border-width: 5px; border-color: #fefee2;">-->

        <legend style="font-size: xxx-large">注册</legend>
        <br/>
        <!--        <span style="font-size: 30px">账号:</span><input type="text"  style="font-size:18px " id="username" placeholder="请输入手机号" required="required"><br/>-->
        <!--        <span style="font-size: 30px">密码:</span><input type="password" style="font-size:18px" id="pwd"placeholder="大小写和数字且长度不少于8位" required="required"><br/><br/>-->
        <div><input type="text" placeholder="账号" id="username" class="text_style"></div>
        <br>
        <div><input type="password" placeholder="密码" id="pwd" class="text_style">
        </div>
        <br>
        <div><input type="password" placeholder="确认密码" id="pwd_check" class="text_style">
        </div>


        <!--        <input list="browsers">-->
        <!--        <datalist id="browsers">-->
        <!--            <option>健身</option>-->
        <!--            <option>饮食</option>-->
        <!--            <option>咨询</option>-->
        <!--            <option>辟谣</option>-->
        <!--            <option>疾病</option>-->
        <!--        </datalist>
        https://www.runoob.com/try/try.php?filename=tryhtml5_datalist-->
        <!--    </fieldset>-->


        <div class="try-btn" id="register" onclick="checkRegister()">注册</div>
        <div class="try-btn" id="exit" onclick="custom_close()">退出</div>
        <!--        <input id="btnClose" class="try-btn" type="button" value="关闭本页" onClick="custom_close()"/>-->
    </div>
</div>
</body>
<script>
    function checkRegister() {

        // var username=document.getElementById();
        // var pwd=document.getElementById();

        var userName = $("#username").val();
        var pwd = $("#pwd").val();
        var pwd_check = $("#pwd_check").val();
        if (userName == null || userName == "" || pwd == null || pwd == "" || pwd_check == null || pwd_check == "") {
            alert("账号或密码不能为空");
        } else {
            //手机号正则式
            // var reguserName = /^(13[0-9]|14[01456879]|15[0-35-9] |16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

            var regpwd = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/
            // if (!reguserName.test(userName)) {
            //     alert("请输入正确的手机号");
            // }
            if (!regpwd.test(pwd)) {
                alert("密码输入不正确，应包括大小写和数字且长度不少于8位");
            } else {
                if (pwd == pwd_check) {
                    $.ajax({
                        type: "post",
                        url: "/user/register",
                        data: {
                            user_name: userName,
                            user_pwd: pwd,
                        },
                        async: false,
                        success: function (response) {
                            if (response == "error")
                                alert("注册失败,用户已存在")
                            else if (response == "ok") {
                                alert("注册成功")
                                setTimeout(window.location.href = "/html/welcome/welcome.html", 1000);
                            } else {
                                alert("未知失败")
                            }
                        }
                    });
                    // <a href="myFirst.html">跳转到用户首页</a>
                    // alert("跳转到用户首页");
                } else {
                    alert("两次密码输入不同，请检查");
                }

            }
        }
    }
</script>

<!--<script src="https://unpkg.com/swiper@8/swiper-bundle.js"> </script>-->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<!--<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js.map"> </script>-->

<script>
    var mySwiper = new Swiper('.swiper', {
        direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },

        // 如果需要分页器
        // pagination: {
        //     el: '.swiper-pagination',
        // },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        // scrollbar: {
        //     el: '.swiper-scrollbar',
        // },
    })
</script>
<script>
    function exit() {
        alert("再见");
        window.close();
    }
</script>

<script>

    function custom_close() {

        if (confirm("您确定要关闭本页吗？")) {
            window.history.back();
        } else {

        }

    }

</script>
</html>